import React, { Component } from 'react';
import { ConcertWrap } from './styledIndex'
import { get } from 'utils/http'


class Child extends Component {
    state = {
        childList: []
    }

    async componentDidMount() {
        let result = await get({
            url: '/api/home/index/getFloorShow?city_id=0&version=6.0.9&referer=2'
        })
        this.setState ({
            childList: result.data[3].list
        })
    }
    render() {
        return (
            <ConcertWrap>
                <div className="head">
                    <header>儿童剧</header>
                    <span>></span>
                </div>
                {
                    this.state.childList.length && (
                        this.state.childList.slice(0,1).map( (value,index) => (
                            <div className="top" key={index} style={{
                                backgroundColor: 'rgb(111, 181, 193)'
                            }}>
                                <div className="hhh">
                                    <div>
                                        <img src={value.pic} alt=""/>
                                    </div>
                                    <div>
                                        <p>
                                            {value.display_show_time}
                                            <span>{value.week}</span>
                                        </p>
                                        <h3>{value.schedular_name}</h3>
                                        <p>{value.city_name}&nbsp;|&nbsp;{value.venue_name}</p>
                                    </div>
                                </div>
                            </div>
                        ) )
                    )
                }
                <div className="foot">
                {
                    this.state.childList.length && (
                        this.state.childList.slice(1,10).map((value,index) => (
                            <figure key={index}>
                                <img src={value.pic} alt=""/>
                                <figcaption>
                                    <h4>{value.schedular_name}</h4>
                                    <span className="num">￥{value.low_price.substring(0,value.low_price.length-3)}</span>
                                    <span>起</span>
                                </figcaption>
                            </figure>
                        ))
                    )
                }
                </div>
            </ConcertWrap>
        );
    }
}

export default Child;